<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件作业</title>
	</head>
	<body>
		<!-- 1.按钮和DIV的单击事件（三种绑定方式） -->
		<button type="button" onclick="btnonclick()">按钮1</button>
		<button type="button" id="btn2">按钮2</button>
		<button type="button" id="btn3">按钮3</button>
		<br>
		<div id="div" onclick="divonclick()" style="width: 100px;height: 50px;background-color: #FF0000;">
			div
		</div>
		<div id="div2" style="width: 100px;height: 50px;background-color: aqua;">
			div2
		</div>
		<div id="div3" style="width: 100px;height: 50px;background-color: aquamarine;">
			div3
		</div>
		
		
		<!-- 2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式） -->
		<div id="div4" style="width: 300px ; height: 300px; background-color: blue " 
				onmouseenter="div4enter()" onmouseleave="div4leave()" onmousemove="div4move()">
			300*300的div
		</div>
		
		
		<!-- 3.登入页面
			用户名输入框，
			密码输入框，
			提交按钮 -->
			<form action="" method="post">
				用户名：
				<input type="text" id="username" value="" onfocus="userNameFocus()" onblur="userNameblur()"/>
				<br>
				密码：
				<input type="password" id="userpwd" value="" onfocus="userPwdFocus()" onblur="userPwdblur()"/>
				<br>
				<button type="submit" id="bbtn" onclick="bbtnonclick()">提交</button>
			</form>
			
			
			
		<!-- 4 -->
		<div id="div5" style="width: 300px ; height: 300px; background-color: yellow " onmousemove="div5move()">	
		</div>
		<button type="button" onclick="add()">添加监听器</button>
		<button type="button" onclick="remove()">移除监听器</button>

	</body>
	<script type="text/javascript">
		function btnonclick(){
			console.log('按钮1被单击')
		}
		document.getElementById('btn2').onclick = function(){
			console.log('按钮2被单击')
		}
		document.getElementById('btn3').addEventListener('click',function(){
			console.log('按钮3被单击')
		})
		function divonclick(){
			console.log('div1被单击')
		}
		document.getElementById('div2').onclick = function(){
			console.log('div2被单击')
		}
		document.getElementById('div3').addEventListener('click',function(){
			console.log('div3被单击')
		})
		
		
		
		function div4enter(){
			document.getElementById('div4').style.backgroundColor = 'red';
			document.getElementById('div4').innerHTML = "进入div";
			console.log('进入div4')
		}
		function div4leave(){
			document.getElementById('div4').style.backgroundColor = 'blue';
			document.getElementById('div4').innerHTML = "300*300的div";
			console.log('离开div4')
		}
		function div4move(){
			console.log('在div4中移动')
		}
		
		
	//        3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
		function userNameFocus(){
			console.log('用户在输入名称')
		}
	//        3.2 用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
		function userNameblur(){
			console.log('用户停止输入名称')
			var userName = document.getElementById('username')
			if(userName.value == ''){
				alert('没有输入用户名');
				return;
			}
		}
	//        3.3 密码框获取焦点事件，控制台输出：用户在输入密码
		function userPwdFocus(){
			console.log('用户在输入密码')
		}
	//        3.4 密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
		function userPwdblur(){
			console.log('用户停止输入密码')
			var userpwd = document.getElementById('userpwd')
			if(userpwd.value == ''){
				alert('没有输入密码');
				return;
			}
		}
	//        3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
	//            密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
		function bbtnonclick(){
			var userName = document.getElementById('username')
			var userpwd = document.getElementById('userpwd')
			if(userName.value == '' || userpwd.value == ''){
				alert('用户名和密码为空');
				return;
			}else if(userName.value == ''){
				alert('用户名为空');
				return;
			}else if(userpwd.value == ''){
				alert('密码为空');
				return;
			}
		}
		
		// 4.实现DIV 鼠标移动事件，采用监听器方式操作，可实现添加和清除监听器功能。
		function div5move(){
			console.log('鼠标移动中')
		}
		function add(){
			document.getElementById('div5').addEventListener('mousemove',div5move)
			alert('监听器添加成功')
		}
		function remove(){
			document.getElementById('div5').removeEventListener('mousemove',div5move)
			alert('监听器移除成功')
		}

	</script>
</html>
